<template>
    <div class="newstart">
        <dv-border-box-11 style=" height: 100vh; width: auto; pointer-events: none;" title="能源数据显示">
            <div class="container">
                <div style="margin-top: 6vh;"></div>
            </div>
            <div class="container">
                <div class="p20" style="height: 20vh; flex: 2;">
                    <el-tag type="info">SOC</el-tag>
                    <dv-percent-pond :config="CellVal" style="width:200px;height:100px;" class="Cell"/>
                </div>
                <div class="p50" style="height: 20vh; flex: 2;">P50</div>
                <div class="p50" style="height: 20vh; flex: 2;">P50</div>
                <div class="p50" style="height: 20vh; flex: 2;">P50</div>
            </div>
            <div class="container">
                <div class="p20" style="height: 50vh; flex: 2;"> 数据表
                    <dv-scroll-ranking-board :config="P20data" style="width:300x;" />
                </div>
                <div class="p40" style="height: 50vh; flex: 6;">
                    <dv-flyline-chart :config="mapdata" style="width:100%;height:100%;" />
                </div>
                <div class="p50" style="height: 50vh; flex: 2;">P50</div>
            </div>
            <div class="container">
                <div class="p20" style="height: 22vh; flex: 2;">p20</div>
                <div class="p50" style="height: 22vh; flex: 2;">P50</div>
                <div class="p50" style="height: 22vh; flex: 2;">P50</div>
            </div>
        </dv-border-box-11>
    </div>
</template>

<script setup>
import { onMounted } from 'vue';

// onMounted(() => {
//     document.querySelector('.clock').addEventListener('click', function(event) {
//         location.href = '/';
//     });
// });

const CellVal={
    value: 66
}

const mapdata = {
    centerPoint: [0.48, 0.35],
    points: [
        [0.52, 0.23],
        [0.43, 0.29],
        [0.59, 0.35],
        [0.53, 0.47],
        [0.45, 0.54],
        [0.36, 0.38],
        [0.62, 0.55],
        [0.56, 0.56],
        [0.37, 0.66],
        [0.55, 0.81],
        [0.55, 0.67],
        [0.37, 0.29],
        [0.20, 0.36],
        [0.76, 0.41],
        [0.59, 0.18],
        [0.68, 0.17],
        [0.59, 0.10]
    ],
    bgImgUrl: '../img/map.png',
    centerPointImg: {
        url: '../img/mapCenterPoint.png'
    },
    pointsImg: {
        url: '../img/mapPoint.png'
    }
}


const P20data = {
    data: [
        {
            name: '站点1',
            value: 55
        },
        {
            name: '站点2',
            value: 120
        },
        {
            name: '站点3',
            value: 78
        },
        {
            name: '站点4',
            value: 66
        },
        {
            name: '站点5',
            value: 80
        },
        {
            name: '站点6',
            value: 45
        },
        {
            name: '站点7',
            value: 29
        }
    ]

} 
</script>

<style scoped>
/* Your CSS styles here */
.container {
    display: flex;
}

.header {
    flex: 1;
    height: 10vh;
    width: 100vh;
    background-color: #4d8bb4;
    color: #fff;
    text-align: center;
    padding-top: 2vh;
    font-size: 40px;
}

.p20 {
    border: 0.01px solid #4d8bb4;
    color: #ddd;
    margin-left: 10px;

}

.p40 {
    border: 0.01px solid #4d8bb4;

}

.p50 {
    border: 0.01px solid #4d8bb4;

}

.newstart {
    background-color: #161c20;
}
.Cell{
    margin: 50px;
    text-align: center;
    line-height: 100px;
    font-size: 10px;
    color: #333;
}
</style>